<template>
  <div class="card content-box">
    <div class="framework-content">
      <!-- 按钮组 -->
      <div v-if="thisPermission.create" class="framework-content-button" style="margin-bottom: 30px">
        <el-button v-if="thisPermission.create" type="primary" @click="optionHandle('CREATE')">
          <el-icon><Plus /></el-icon>
          <span style="margin-left: 4px">新增线路</span>
        </el-button>
      </div>
      <div class="framework-content-card">
        <div class="card-box" v-for="item in routerList" :key="item.id">
          <div class="card-title" :style="{ background: item.color }">
            <StationTitleIcon></StationTitleIcon>
            <span class="card-title-span">{{ item.name }}</span>
            <StationTitleIcon style="transform: rotateY(180deg)"></StationTitleIcon>
          </div>
          <!-- <div class="card-logo"></div> -->
          <div class="card-station">
            <div class="card-span span1">
              <StationStart class="card-span-icon"></StationStart>
              <span class="card-span-name" v-if="item.station && item.station.length">{{ item.station[0].name }}</span>
              <span v-else> -- </span>
            </div>
            <div class="card-span span2">
              <StationEnd class="card-span-icon"></StationEnd>
              <span class="card-span-name" v-if="item.station && item.station.length">
                <span v-if="item.loop">{{ item.station[0].name }}</span>
                <span v-else>
                  <span v-if="item.station.length > 1">{{ item.station[item.station.length - 1].name }}</span>
                  <span v-else> -- </span>
                </span>
              </span>
              <span v-else> -- </span>
            </div>
          </div>
          <div class="card-button" v-if="thisPermission.update || thisPermission.delete || thisPermission.detail">
            <el-button
              link
              type="primary"
              v-if="thisPermission.update"
              @click="optionHandle('MODIFY', item)"
              class="third-party-ant-btn card-button-item"
            >
              <el-icon><EditPen /></el-icon>
              <span style="margin-left: 4px">编辑</span>
            </el-button>
            <div v-if="thisPermission.update && (thisPermission.delete || thisPermission.detail)" class="separate"></div>
            <el-button
              link
              type="primary"
              v-if="thisPermission.delete"
              @click="optionHandle('DELETE', item)"
              class="third-party-ant-btn card-button-item"
            >
              <el-icon><Delete /></el-icon>
              <span style="margin-left: 4px">删除</span>
            </el-button>
            <div v-if="thisPermission.delete && thisPermission.detail" class="separate"></div>
            <el-button
              link
              type="primary"
              v-if="thisPermission.detail"
              @click="optionHandle('VIEW', item)"
              class="third-party-ant-btn card-button-item"
            >
              <el-icon><View /></el-icon>
              <span style="margin-left: 4px">详情</span>
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--    新增弹框 start   -->
    <ModalCreateOrEdit
      v-if="modalCreateOrEdit"
      ref="createOrEditRef"
      :is-edit="isEdit"
      :edit-item="lineItem"
      @cancel="cancel"
      @submit="submit"
    />
    <!--    新增弹框 end   -->
    <!-- 详情弹窗 start -->
    <ModalDetail v-if="modalDetail" ref="modalDetailRef" :data="lineItem" @submit="cancel" />
    <!-- 详情弹窗 end -->
  </div>
</template>

<script setup lang="ts" name="RouteManagement">
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { Route } from "@/api/interface/sysManagement";
import { getRouterListApi, delRouterApi } from "@/api/modules/sysManagement/routeManage";
import ModalCreateOrEdit from "./modal/modal_create_or_edit.vue";
import ModalDetail from "./modal/modal_detail.vue";
import StationStart from "./icon/station_start.vue";
import StationEnd from "./icon/station_end.vue";
import StationTitleIcon from "./icon/station_title_icon.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();
const authStore = useAuthStore();
const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});

const routerList = ref<Route.ResRouteList[]>([]);

const modalCreateOrEdit = ref(false);
const isEdit = ref(false);
const lineItem = ref<Route.ResRouteList | any>();
const modalDetail = ref(false);

const getRouterList = async () => {
  const res = await getRouterListApi();
  routerList.value = res.data;
};

const optionHandle = (type: string, item: object = {}) => {
  lineItem.value = item;
  switch (type) {
    case "CREATE":
      isEdit.value = false;
      modalCreateOrEdit.value = true;
      break;
    case "MODIFY":
      isEdit.value = true;
      modalCreateOrEdit.value = true;
      break;
    case "DELETE":
      delDialog();
      break;
    case "VIEW":
      modalDetail.value = true;
      break;
    default:
      break;
  }
};

const delDialog = () => {
  if (!lineItem.value) return;
  ElMessageBox.confirm(`是否确定删除线路：${lineItem.value.name}`, "删除确认", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning"
  }).then(async () => {
    await delRouterApi(lineItem.value.id)
      .then(() => {
        ElMessage.success("操作成功");
        submit();
      })
      .catch(error => {
        console.log(error);
      });
  });
};

const closeModal = () => {
  modalCreateOrEdit.value = false;
  modalDetail.value = false;
};

const cancel = () => {
  closeModal();
  lineItem.value = {};
};

const submit = () => {
  closeModal();
  lineItem.value = {};
  getRouterList();
};

onMounted(() => {
  getRouterList();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
